<template>
  <div class="wrap">
    <div class="card">
      <div v-for="(d,i) in cardInfo" :key="i" class="box">
        <div class="title">{{ d.content }}</div>
        <div>
          <div class="content">{{ d.value?d.value:'---' }}</div>
          <Button v-if="i==='cardNo'" class="button" size="M" @confirm="Checkcertificate">查看证件</Button>
        </div>
      </div>
    </div>
    <uni-popup ref="popup" :mask-click="false">
      <div v-for="d in identitycardImg" :key="d">
        <img :src="d.ImgUrl" class="img">
      </div>
      <Icon class="icon" name="icon-shanchu-4" size="60" @tap="close" />
    </uni-popup>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import Button from '@C/Button.vue'
import Icon from '@C/Icon.vue'
import { storeState } from '@U/common'
import type { IObj } from '@/interface'

const cardInfo = ref(<IObj>{
  name: {
    content: '真实姓名:',
    value: '',
  },
  mobile: {
    content: '手机号码:',
    value: '',
  },
  cardNo: {
    content: '证件号码:',
    value: '',
  },
  idValidity: {
    content: '证件有效期:',
    value: '',
  },
})

const identitycardImg = ref(<IObj>{
  cardImgBack: {
    ImgUrl: '',
  },
  cardImgFront: {
    ImgUrl: '',
  },
})

const zhiKeInfo = computed(() => storeState.zhiKeInfo)
const getpersonInfo = async () => {
  Object.keys(cardInfo.value).forEach((key : string) => {
    cardInfo.value[key].value = zhiKeInfo.value[key]
    // 身份证号是否长期
    cardInfo.value.idValidity.value = `${zhiKeInfo.value.longTimeOrNo ? '长期' : zhiKeInfo.value.idValidity}`
  })
  Object.keys(identitycardImg.value).forEach((key : string) => {
    identitycardImg.value[key].ImgUrl = `${import.meta.env.VITE_SHOUDAO_IMG_URL}/${zhiKeInfo.value[key]}`
  })
}
getpersonInfo()

const popup = ref()
const Checkcertificate = () => {
  popup.value.open('center')
}

const close = () => {
  popup.value.close()
}

</script>
<style lang="less" scoped>
.wrap {
  background: #F2F2F7;
  padding: 40rpx 0 0;
  .img{
    width: 600rpx;
    height:400rpx;
    margin: 20rpx 0;
  }
  .icon {
    display: block;
    margin: 0 auto;
    padding: 40rpx 0 0 0;
    opacity: 0.5;
  }
  .card{
    width: 686rpx;
    height: 400rpx;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 24rpx;
    .box {
      display: flex;
      padding:20rpx 40rpx;
      .title {
        width: 200rpx;
      }
      .content {
        padding-left: 20rpx;
      }
      .button {
        padding-left: 20rpx;
      }
    }
  }
  .button-text{
    width: 600rpx;
    height: 400rpx;
    border: 1px solid red;
    background: #FFFFFF;
  }
}
</style>
